<h1 class="demo-title">徽标</h1>
<div class="demo-panel">
    <div class="badge badge-red">123</div> <div class="badge badge-red">1</div> <div class="badge-char badge-red">New</div>
    <br> <br>
    <div class="badge-wrap">
        字符串徽标
        <div class="badge-char badge-red">New</div>
    </div>
    <br>    <br>
    <div class="badge-wrap">
        数字徽标
        <div class="badge-num badge-red">123</div>
    </div>

    <br><br> <p>对应的html代码如下：</p>


    <pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="badge badge-red"&gt;123&lt;/div&gt;
        &lt;div class="badge badge-red"&gt;1&lt;/div&gt;
        &lt;div class="badge-char badge-red"&gt;New&lt;/div&gt;
        &lt;div class="badge-wrap"&gt;字符串徽标&lt;div class="badge-char badge-red"&gt;New&lt;/div&gt;&lt;/div&gt;
        &lt;div class="badge-wrap"&gt;数字徽标&lt;div class="badge-num badge-red"&gt;123&lt;/div&gt;&lt;/div&gt;
    </code>
    </pre>

    <!--<textarea  class="prehtml-textarea" cols="80" rows="12">-->
        <!--<div class="badge">123</div>-->
        <!--<div class="badge-char">New</div>-->
        <!--<div class="badge-wrap">-->
            <!--字符串徽标-->
            <!--<div class="badge-char">New</div>-->
        <!--</div>-->
        <!--<div class="badge-wrap">-->
            <!--数字徽标-->
            <!--<div class="badge-num">123</div>-->
        <!--</div>-->

    <!--</textarea>-->

</div>